<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>会计等式变化动画讲解</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
        }
        .container {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .animation-area {
            height: 400px;
            border: 2px dashed #3498db;
            border-radius: 8px;
            margin: 20px 0;
            position: relative;
            overflow: hidden;
        }
        .account {
            position: absolute;
            width: 120px;
            height: 60px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            transition: all 1s ease;
            box-shadow: 0 3px 5px rgba(0,0,0,0.2);
            cursor: pointer;
            text-align: center;
            font-size: 14px;
            line-height: 1.3;
        }
        .asset {
            background-color: #e74c3c;
        }
        .liability {
            background-color: #3498db;
        }
        .equity {
            background-color: #2ecc71;
        }
        .income {
            background-color: #f39c12;
        }
        .expense {
            background-color: #9b59b6;
        }
        .money {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: gold;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            box-shadow: 0 2px 3px rgba(0,0,0,0.3);
            font-size: 12px;
            z-index: 10;
        }
        .controls {
            text-align: center;
            margin: 20px 0;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 0 5px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #2980b9;
        }
        .explanation {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
            border-left: 4px solid #3498db;
        }
        .equation {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            margin: 15px 0;
            color: #2c3e50;
        }
        .account-value {
            font-size: 16px;
            margin-top: 3px;
        }
        .progress-bar {
            height: 5px;
            background-color: #ecf0f1;
            margin-bottom: 20px;
            border-radius: 3px;
            overflow: hidden;
        }
        .progress {
            height: 100%;
            background-color: #2ecc71;
            width: 0%;
            transition: width 0.5s ease;
        }
        .journal-entry {
            font-family: 'Microsoft YaHei', monospace;
            margin: 10px 0;
            line-height: 1.6;
        }
        .journal-entry .debit {
            display: inline-block;
            width: 120px;
        }
        .journal-entry .credit {
            display: inline-block;
            width: 120px;
            margin-left: 20px;
        }
        .journal-entry .amount {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>会计等式变化动画讲解</h1>
        
        <div class="progress-bar">
            <div class="progress" id="progress"></div>
        </div>
        
        <div class="animation-area" id="animationArea">
            <!-- 会计科目元素将通过JavaScript动态添加 -->
        </div>
        
        <div class="controls">
            <button id="startBtn">开始演示</button>
            <button id="resetBtn">重置</button>
            <button id="prevBtn" disabled>上一步</button>
            <button id="nextBtn" disabled>下一步</button>
        </div>
        
        <div class="explanation" id="explanation">
            <h3>会计等式变化原理</h3>
            <p>会计科目就像是一个个装钱的"盒子"，记录着企业各项经济活动的资金变化。</p>
            <p>每个业务发生时，资金会在这些"盒子"之间流动，但总是遵循"有借必有贷，借贷必相等"的原则。</p>
            <p>点击"开始演示"按钮，观看一个简单的业务过程如何影响会计等式。</p>
            <div class="equation" id="accountingEquation">资产 = 负债 + 所有者权益</div>
        </div>
    </div>

    <script>
        const animationArea = document.getElementById('animationArea');
        const startBtn = document.getElementById('startBtn');
        const resetBtn = document.getElementById('resetBtn');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const explanation = document.getElementById('explanation');
        const accountingEquation = document.getElementById('accountingEquation');
        const progressBar = document.getElementById('progress');
        
        let currentStep = 0;
        const steps = [
            {
                title: "初始状态",
                desc: "公司刚成立，所有者投入现金10,000元作为资本。",
                action: initAccounts,
                equation: "资产(10,000) = 负债(0) + 所有者权益(10,000)"
            },
            {
                title: "购买设备",
                desc: "公司用库存现金5,000元购买办公设备。现金减少，固定资产增加。",
                action: purchaseEquipment,
                equation: "资产(10,000) = 负债(0) + 所有者权益(10,000)",
                entry: formatJournalEntry("固定资产", "5,000", "库存现金", "5,000")
            },
            {
                title: "取得收入",
                desc: "公司提供服务，收到库存现金3,000元。现金增加，收入增加。",
                action: earnRevenue,
                equation: "资产(13,000) = 负债(0) + 所有者权益(10,000) + 收入(3,000)",
                entry: formatJournalEntry("库存现金", "3,000", "收入", "3,000")
            },
            {
                title: "支付费用",
                desc: "公司支付水电费1,000元。现金减少，费用增加。",
                action: payExpense,
                equation: "资产(12,000) = 负债(0) + 所有者权益(10,000) + 收入(3,000) - 费用(1,000)",
                entry: formatJournalEntry("费用", "1,000", "库存现金", "1,000")
            },
            {
                title: "借贷关系",
                desc: "观察发现，每笔业务都同时影响至少两个科目，借贷金额相等。",
                action: showBalances,
                equation: "资产(12,000) = 负债(0) + 所有者权益(10,000) + 利润(2,000)"
            }
        ];
        
        // 格式化会计分录
        function formatJournalEntry(debitAccount, debitAmount, creditAccount, creditAmount) {
            return `
                <div class="journal-entry">
                    <span class="debit">借：${debitAccount}</span>
                    <span class="amount">${debitAmount}</span><br>
                    <span class="credit">贷：${creditAccount}</span>
                    <span class="amount">${creditAmount}</span>
                </div>
            `;
        }
        
        // 初始化会计科目
        function initAccounts() {
            animationArea.innerHTML = '';
            
            // 创建会计科目元素
            const cash = createAccount('现金', 100, 150, 'asset', '10,000');
            const equipment = createAccount('固定资产', 400, 150, 'asset', '0');
            const capital = createAccount('实收资本', 100, 300, 'equity', '10,000');
            const revenue = createAccount('收入', 400, 300, 'income', '0');
            const expense = createAccount('费用', 250, 450, 'expense', '0');
            
            // 显示初始资金
            createMoney(70, 120, '+10,000', () => {
                moveMoney(70, 120, 70, 270, '+10,000', () => {
                    updateExplanation();
                    updateProgress();
                    nextBtn.disabled = false;
                });
            });
        }
        
        // 购买设备
        function purchaseEquipment() {
            createMoney(70, 120, '-5,000', () => {
                moveMoney(70, 120, 370, 120, '+5,000', () => {
                    updateAccountValue('现金', '5,000');
                    updateAccountValue('固定资产', '5,000');
                    
                    updateExplanation();
                    updateProgress();
                    nextBtn.disabled = false;
                    prevBtn.disabled = false;
                });
            });
        }
        
        // 取得收入
        function earnRevenue() {
            createMoney(570, 70, '+3,000', () => {
                moveMoney(570, 70, 70, 120, '+3,000', () => {
                    setTimeout(() => {
                        moveMoney(70, 120, 370, 270, '+3,000', () => {
                            updateAccountValue('现金', '8,000');
                            updateAccountValue('收入', '3,000');
                            
                            updateExplanation();
                            updateProgress();
                            nextBtn.disabled = false;
                            prevBtn.disabled = false;
                        });
                    }, 500);
                });
            });
        }
        
        // 支付费用
        function payExpense() {
            createMoney(70, 120, '-1,000', () => {
                moveMoney(70, 120, 220, 420, '+1,000', () => {
                    updateAccountValue('现金', '7,000');
                    updateAccountValue('费用', '1,000');
                    
                    updateExplanation();
                    updateProgress();
                    nextBtn.disabled = false;
                    prevBtn.disabled = false;
                });
            });
        }
        
        // 显示借贷平衡
        function showBalances() {
            highlightAccounts();
            updateExplanation();
            updateProgress();
            nextBtn.disabled = true;
            prevBtn.disabled = false;
        }
        
        // 更新解释内容
        function updateExplanation() {
            const step = steps[currentStep];
            let html = `<h3>${step.title}</h3><p>${step.desc}</p>`;
            
            if (step.entry) {
                html += `<p>会计分录：</p>${step.entry}`;
            }
            
            html += `<p>会计等式：${step.equation}</p>`;
            explanation.innerHTML = html;
            accountingEquation.textContent = step.equation.split(')')[0] + ") = " + step.equation.split('= ')[1];
        }
        
        // 更新进度条
        function updateProgress() {
            const progress = ((currentStep + 1) / steps.length) * 100;
            progressBar.style.width = `${progress}%`;
        }
        
        // 创建会计科目元素
        function createAccount(name, x, y, type, value) {
            const account = document.createElement('div');
            account.className = `account ${type}`;
            account.id = `account-${name}`;
            account.style.left = `${x}px`;
            account.style.top = `${y}px`;
            account.innerHTML = `${name}<div class="account-value">${value}</div>`;
            animationArea.appendChild(account);
            return account;
        }
        
        // 更新科目金额
        function updateAccountValue(name, value) {
            const account = document.getElementById(`account-${name}`);
            const parts = account.innerHTML.split('<div class="account-value">');
            account.innerHTML = `${parts[0]}<div class="account-value">${value}</div>`;
        }
        
        // 创建资金元素
        function createMoney(x, y, amount, callback) {
            const money = document.createElement('div');
            money.className = 'money';
            money.style.left = `${x}px`;
            money.style.top = `${y}px`;
            money.innerHTML = amount;
            animationArea.appendChild(money);
            
            setTimeout(() => {
                money.style.opacity = '0';
                setTimeout(() => {
                    money.remove();
                }, 500);
            }, 4000);
            
            setTimeout(() => {
                money.style.transform = 'scale(1.2)';
                setTimeout(() => {
                    money.style.transform = 'scale(1)';
                    if (callback) callback();
                }, 300);
            }, 300);
            
            return money;
        }
        
        // 移动资金
        function moveMoney(fromX, fromY, toX, toY, amount, callback) {
            const money = createMoney(fromX, fromY, amount);
            
            setTimeout(() => {
                money.style.left = `${toX}px`;
                money.style.top = `${toY}px`;
                
                setTimeout(() => {
                    money.style.transform = 'scale(1.2)';
                    setTimeout(() => {
                        money.style.transform = 'scale(1)';
                        setTimeout(() => {
                            if (callback) callback();
                        }, 300);
                    }, 300);
                }, 1000);
            }, 500);
        }
        
        // 高亮显示所有科目
        function highlightAccounts() {
            const accounts = document.querySelectorAll('.account');
            accounts.forEach(account => {
                account.style.transform = 'scale(1.1)';
                account.style.boxShadow = '0 0 15px rgba(0,0,0,0.4)';
                
                setTimeout(() => {
                    account.style.transform = 'scale(1)';
                    account.style.boxShadow = '0 3px 5px rgba(0,0,0,0.2)';
                }, 1500);
            });
        }
        
        // 事件监听
        startBtn.addEventListener('click', () => {
            currentStep = 0;
            startBtn.disabled = true;
            nextBtn.disabled = true;
            prevBtn.disabled = true;
            steps[currentStep].action();
        });
        
        resetBtn.addEventListener('click', () => {
            currentStep = 0;
            startBtn.disabled = false;
            nextBtn.disabled = true;
            prevBtn.disabled = true;
            animationArea.innerHTML = '';
            progressBar.style.width = '0%';
            explanation.innerHTML = `
                <h3>会计等式变化原理</h3>
                <p>会计科目就像是一个个装钱的"盒子"，记录着企业各项经济活动的资金变化。</p>
                <p>每个业务发生时，资金会在这些"盒子"之间流动，但总是遵循"有借必有贷，借贷必相等"的原则。</p>
                <p>点击"开始演示"按钮，观看一个简单的业务过程如何影响会计等式。</p>
            `;
            accountingEquation.textContent = "资产 = 负债 + 所有者权益";
        });
        
        nextBtn.addEventListener('click', () => {
            currentStep++;
            nextBtn.disabled = true;
            prevBtn.disabled = false;
            if (currentStep < steps.length) {
                steps[currentStep].action();
            }
        });
        
        prevBtn.addEventListener('click', () => {
            if (currentStep > 0) {
                currentStep--;
                resetBtn.click();
                startBtn.click();
                for (let i = 0; i < currentStep; i++) {
                    nextBtn.click();
                }
            }
        });
    </script>
</body>
</html>